﻿@{
    ViewBag.Title = "确认下单";
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>确认下单</title>
    <link href="~/Content/Style/gobal.css" rel="stylesheet" type="text/css">
    <link href="~/Content/Style/sure.css" rel="stylesheet" type="text/css">

    @*datePicker时间控件*@
    <script src="~/Content/datePicker/datePicker.js"></script>

    @*jqueryAlert提示框*@
    <link href="~/Content/alert/css/alert.css" rel="stylesheet" />
    <script src="~/Content/alert/js/alert.js"></script>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

    <style>
        .xuanze {
            width: 20px;
            height: 20px;
            margin-top: 4px;
            border: 1px solid #fc6625;
            margin-top: 20px;
        }

        .f-right {
            float: right;
        }

        .zhuangtai {
            background-image: url(/Content/images/right.png);
            background-repeat: no-repeat;
            background-size: 20px;
        }

        .tatol_pice {
            width: 80%;
            display: block;
            float: right;
            font-size: 18px;
            color: #ababab;
            text-align: right;
            line-height: 35px;
        }

        .disabled {
            pointer-events: none;
            cursor: default;
        }
    </style>
</head>
<body>
    <div id="app" class="wrap">
        <div class="content">
            <a class="user_info" id="Address">
                <div class="info_left">
                    <p class="user_name">
                        <span>姓名：</span><span>{{UserInfo.AccName}}</span>&nbsp;&nbsp;
                        <span>联系电话：</span><span>{{UserInfo.AccCall}}</span><br />
                        <div style="margin-top: 10px;font-size: 15px;float:left;">
                            <span>送餐地址：</span>
                            <select style="padding:4px;" id="SelectUserContact" v-on:change="UserContactChange()">
                                <option value="">请选择配送区域和地址</option>
                                <option v-for="uc in UserContact" :value="uc.DistrictID">{{uc.ContactDistrict + '-' + uc.AddrContent}}</option>
                            </select>
                            <div id="TextUserContact" style="float:right;" v-on:click="AddUserContact()"></div>
                        </div>
                    </p>
                </div>
                <div class="info_right" v-on:click="AddUserContact()"></div>
            </a>

            <div style="margin-bottom:10px;">
                <div style="display:inline-block;margin-left:16px">
                    <span>是否自取：</span>
                </div>
                <div style="display:inline-block;">
                    <div id="isTake2" class="xuanze f-right" style="float:left;margin-top:22px" v-on:click="take(2)"></div>
                    <div style="float:left;margin:22px 15px 0px 5px;">是</div>
                    <div id="isTake1" class="xuanze f-right" style="float:left;margin-top:22px" v-on:click="take(1)"></div>
                    <div style="float:left;margin:22px 15px 0px 5px;">否</div>
                </div>
            </div>

            <div class="pay_away">
                <div class="pay">支付方式:</div>
                <div class="cont">
                    <div class="title">
                        <p class="name">微信支付</p>
                        <span class="pice">
                            <div class="xuanze f-right zifu zhuangtai"></div>
                        </span>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>

            <div class="server">
                <div class="cont">
                    <div class="title">
                        <p class="name1">送餐日期</p>
                        <span class="pice1">
                            <input type="text" class="select_style" id="DeliveryDate" placeholder="选择日期" />
                        </span>
                        <div class="clearfix"></div>
                    </div>
                    <div class="title">
                        <p class="name1">送餐时间</p>
                        <span class="pice1">
                            <input type="text" class="select_style" id="DeliveryTime" placeholder="选择时间" />
                        </span>
                        <div class="clearfix"></div>
                    </div>
                    <div class="title1">
                        <p class="name1" style="border-bottom: none;">送餐备注</p>
                        <span class="pice1">
                            <input class="input_style" id="IntBZ" type="text" placeholder="输入信息" />
                        </span>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>

            <div class="info">
                <div class="cont">
                    <div class="title" v-for="item in DishesShoppingCar">
                        <p class="name">{{item.Order_Dishes_T.DishesNmae}}</p>
                        <span class="pice_num">{{item.Num}}份</span>
                        <span class="pice_mon" style="color: red">￥{{item.Order_Dishes_T.DishesPay}}</span>

                        <span class="tatol_pice">总计：{{item.Num}} * {{item.Order_Dishes_T.DishesPay}} = {{item.Num * item.Order_Dishes_T.DishesPay}}元</span>
                        <div class="clearfix"></div>
                    </div>
                    <div class="title">
                        <p class="name">包装费</p>
                        <span class="pice">￥{{totalDelPackMon}}</span>
                        <div class="clearfix"></div>
                    </div>
                    <div class="title">
                        <p class="name">配送费</p>
                        <span class="pice">￥{{DelFormMon}}</span>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
        <div style="height: 100px;"></div>
        <div id="footer">
            <ul>
                <li class="shop_car"><span class="car"></span><a>共<span>{{OrdertotaMoney}}</span>元</a></li>
                <li class="rest_price"><a href="#" id="ConfirmOrder" v-on:click="BookOrder2()">确认下单</a></li>
                <div class="cls"></div>
            </ul>
        </div>
    </div>

    <script src="~/Content/Script/jquery-1.8.3.min.js"></script>
    <!-- 引入 Vue -->
    <script src="https://unpkg.com/vue"></script>

    <script type="text/javascript">
        var totaMoney = @ViewBag.totaMoney;     //选中购物车的商品总额
        Vue.config.productionTip = false;   //Vue去掉警告 You are running Vue in development mode
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    DishesShoppingCar: '',
                    totalDelPackMon: 0,
                    OrdertotaMoney: 0,
                    UserInfo: '',
                    UserContact: '',
                    DelFormMon: 0,
                    isTake: 1,
                    Payment: '微信支付',
                };
            },
            created() {
                var _this = this;
                var GetRequest = new GetRequest();
                function GetRequest() {
                    var url = location.search; //获取url中"?"符后的字串
                    var theRequest = new Object();
                    if (url.indexOf("?") != -1) {
                        var str = url.substr(1);
                        strs = str.split("&");
                        for (var i = 0; i < strs.length; i++) {
                            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                        }
                    }
                    return theRequest;
                }
                $.ajax({
                    url: "/Order/GetDishesShoppingCar",
                    type: "POST",
                    dataType: "json",
                    data: { CarID: '', YZM: '', RETID: 1 },
                    success: function (data) {
                        if (data.BS == 1) {
                            //console.log(data);
                            vm.DishesShoppingCar = data.rows;
                            //包装费
                            if (vm.DishesShoppingCar != "") {
                                vm.totalDelPackMon = 0;
                                vm.DishesShoppingCar.forEach(function (item, index) {
                                    vm.totalDelPackMon += item.Order_Dishes_T.DelPackMon * item.Num;
                                });
                                vm.OrdertotaMoney = vm.totalDelPackMon + totaMoney;
                            }
                        }
                    }
                });
                this.GetUserInfo();
                this.GetUserContact();
                // 默认选择为派送
                var isTake1 = document.getElementById("isTake1");
                isTake1.className += " " + "zhuangtai";
                var isTake = 1; // 默认派送 1：派送；2：自取
            },
            methods: {
                //用户信息
                GetUserInfo() {
                    $.ajax({
                        url: "/Order/GetUserinfo",
                        type: "POST",
                        dataType: "json",
                        data: { },
                        success: function (data) {
                            if (data != null) {
                                vm.UserInfo = data;
                                //console.log(data);
                            }
                        }
                    });
                },
                //用户地址
                GetUserContact() {
                    $.ajax({
                        url: "/Order/GetAllUserSendAddr",
                        type: "POST",
                        dataType: "json",
                        data: { OpenId: "", AccID: 0, YZM: "", RETID: 1 },
                        success: function (data) {
                            //console.log(data);
                            if (data.BS == 1) {
                                vm.UserContact = data.rows;
                            }
                            else {
                                $("#SelectUserContact").remove();
                                $("#TextUserContact").append("<span>请添加送餐地址</span>")
                            }
                        }
                    });
                },
                AddUserContact() {
                    //console.log(vm.UserInfo);
                    if (vm.UserInfo != null) {
                        window.location.href = "/Information/Address?IsAdd=1&shopnumber=" + vm.UserInfo.AccID;
                    }
                },
                UserContactChange: function UserContactChange() {
                    var SendDistrictID = $("#SelectUserContact").val();
                    $.ajax({
                        url: "/Order/GetUserDistrict",
                        type: "Post",
                        dataType: 'json',
                        data: { DistrictID: SendDistrictID },
                        success: function (result) {
                            //console.log(result);
                            if (result.BS == '1') {
                                vm.DelFormMon = result.rows[0].DelFormMon;  //配送费
                                vm.OrdertotaMoney = vm.totalDelPackMon + totaMoney + vm.DelFormMon;   //总价钱
                            }
                            else {
                                vm.DelFormMon = 0;
                                vm.OrdertotaMoney = vm.totalDelPackMon + totaMoney;
                            }
                        }
                    });
                },
                take: function take(v) {
                    var _this = this;
                    if ($("#SelectUserContact").val() == "" || $("#SelectUserContact").val() == null) {
                        jqueryAlert({
                            'content': '请先选择送餐地址！'
                        });
                    }
                    else {
                        if (v == 1) {
                            var isTake1 = document.getElementById("isTake1");
                            isTake1.className += " " + "zhuangtai";
                            var isTake2 = document.getElementById("isTake2");
                            isTake2.className = "xuanze f-right";
                            _this.isTake = 1;   //1：派送
                            _this.OrdertotaMoney = _this.totalDelPackMon + totaMoney + _this.DelFormMon;   //总价钱
                        } else {
                            var isTake2 = document.getElementById("isTake2");
                            isTake2.className += " " + "zhuangtai";
                            var isTake1 = document.getElementById("isTake1");
                            isTake1.className = "xuanze f-right";
                            _this.isTake = 2;   //2：自取
                            _this.OrdertotaMoney = _this.totalDelPackMon + totaMoney;
                        }
                    }
                },
                //确认下单
                BookOrder2: function BookOrder2() {
                    var _this = this;
                    //console.log(_this.UserInfo);
                    //console.log(_this.DishesShoppingCar[0]);
                    //console.log($("#SelectUserContact option:selected").text());
                    //console.log(_this.isTake);
                    //console.log(_this.Payment);
                    //console.log($("#DeliveryDate").val());
                    //console.log($("#DeliveryTime").val());
                    //console.log($("#IntBZ").val());
                    if (_this.DishesShoppingCar[0].CarID == "" || _this.DishesShoppingCar[0].CarID == null) {
                        jqueryAlert({
                            'content': '你还没选择任何商品！'
                        });
                    }
                    else if (_this.UserInfo.AccID == "" || _this.UserInfo.AccID == null || _this.UserInfo.AccName == "" || _this.UserInfo.AccName == null || _this.UserInfo.AccCall == "" || _this.UserInfo.AccCall == null) {
                        jqueryAlert({
                            'content': '联系人和联系电话不能为空！'
                        });
                    }
                    else if ($("#SelectUserContact").val() == "" || $("#SelectUserContact").val() == null) {
                        jqueryAlert({
                            'content': '请选择送餐地址！'
                        });
                    }
                    else if ($("#DeliveryDate").val() == "" || $("#DeliveryDate").val() == null) {
                        jqueryAlert({
                            'content': '请选择送餐日期！'
                        });
                    }
                    else if ($("#DeliveryTime").val() == "" || $("#DeliveryTime").val() == null) {
                        jqueryAlert({
                            'content': '请选择送餐时间！'
                        });
                    }
                    else {
                        $("#ConfirmOrder").addClass("disabled");
                        $.ajax({
                            url: "/Order/BookOrder2",
                            type: "Post",
                            dataType: 'json',
                            data: {
                                WaltPayID: 'wxzf',     //微信支付ID
                                WaltPricType: '2',    //微信支付（第三方支付）
                                SelectUserContact: $("#SelectUserContact option:selected").text(),    //配送地址
                                Date: $("#DeliveryDate").val(),   //送餐日期
                                Time: $("#DeliveryTime").val(),   //送餐时间
                                BZ: $("#IntBZ").val(),    //备注
                                Type: '200001',   //下单类型（个人下单--200001，企业下单--200002）
                                Total: _this.OrdertotaMoney,      //价钱总额
                                isTake: _this.isTake,     //是否自取（1:派送 2：自取）
                                DelFormMon: _this.DelFormMon,      //订单配送费
                                DelPackMon: _this.totalDelPackMon,      //订单包装费用
                            },
                            success: function (result) {
                                //console.log(result);
                                if (result == '10') {
                                    window.location = '/Order/TiJiaoOrder'; //打开确认订单页
                                }
                                else if (result.msg == 'success') {
                                    WeixinJSBridge.invoke(
                                        'getBrandWCPayRequest', {
                                            "appId": result.appId,     //公众号名称，由商户传入
                                            "timeStamp": result.timeStamp,         //时间戳，自1970年以来的秒数
                                            "nonceStr": result.nonceStr, //随机串
                                            "package": result.packageValue,
                                            "signType": "MD5",         //微信签名方式:
                                            "paySign": result.paySign //微信签名
                                        },
                                        function (res) {
                                            if (res.err_msg == "get_brand_wcpay_request:ok") {      //支付成功
                                                $.ajax({
                                                    url: "/Order/UpdateFormIsPay",
                                                    type: "Post",
                                                    dataType: 'json',
                                                    data: { },
                                                    success: function (date) {
                                                        //console.log(date);
                                                        if (date.BS == '1') {
                                                            jqueryAlert({
                                                                'content': '支付成功,请稍后查询余额,如有疑问,请联系管理员！'
                                                            });
                                                            setTimeout(function () { window.location.href = "/Order/OrderList"; }, 1000);
                                                        }
                                                    }
                                                });
                                            }
                                            else if (res.err_msg == "get_brand_wcpay_request:cancel") {      //支付过程中用户取消
                                                jqueryAlert({
                                                    'content': '支付过程中用户取消，即将跳转到用户订单页！'
                                                });
                                                setTimeout(function () { window.location.href = "/Order/OrderList"; }, 1000);
                                            }
                                            else if (res.err_msg == "get_brand_wcpay_request:fail") {      //支付失败
                                                jqueryAlert({
                                                    'content': '支付失败，请重新支付该订单！'
                                                });
                                                setTimeout(function () { window.location.href = "/Order/OrderList"; }, 1000);
                                            }
                                        }
                                    );
                                }
                                else {
                                    jqueryAlert({
                                        'content': result.msg
                                    });
                                    $("#ConfirmOrder").removeClass("disabled");
                                }
                            }
                        });
                    }
                },

            }
        })

        //送餐日期
        $("#DeliveryDate").focus(function () {
            document.activeElement.blur();
        });
        var calendar = new datePicker();
        calendar.init({
            'trigger': '#DeliveryDate', /*按钮选择器，用于触发弹出插件*/
            'type': 'date',/*模式：date日期；datetime日期时间；time时间；ym年月；*/
            'minDate': '2000-1-1',/*最小日期*/
            'maxDate': '2100-12-31',/*最大日期*/
            'onSubmit': function () {/*确认时触发事件*/
                var theSelectData = calendar.value;
            },
            'onClose': function () {/*取消时触发事件*/
            }
        });


        //送餐时间
        $("#DeliveryTime").focus(function () {
            document.activeElement.blur();
        });
        var calendars = new datePicker();
        calendars.init({
            'trigger': '#DeliveryTime', /*按钮选择器，用于触发弹出插件*/
            'type': 'time',/*模式：date日期；datetime日期时间；time时间；ym年月；*/
            'onSubmit': function () {/*确认时触发事件*/
                var theSelectData = calendars.value;
            },
            'onClose': function () {/*取消时触发事件*/
            }
        });

        //支付方式
        //$(".zifu").click(function () {
        //    if ($(this).attr("class").indexOf("zhuangtai") > 0) {
        //        $(this).removeClass("zhuangtai")
        //    } else {
        //        $(this).addClass("zhuangtai")
        //    }
        //});

    </script>
</body>
</html>
